<template>
  <div>
    <div class="options">
      <el-button @click="info.isShow=true" plain round type="primary">添加</el-button>
    </div>
    <!-- data: 引用数据源 -->
    <!-- default-expand-all: 默认展开所有折叠项 -->
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- children: 指定存储子节点的属性名, hasChildren: 是否有子节点 -->
      <!-- prop: 指定当前列需要展示的数据名称 -->
      <el-table-column prop="id" label="序号" min-width="80"> </el-table-column>
      <el-table-column prop="title" label="菜单标题" min-width="180">
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" min-width="180">
        <!-- props: 自定义模板变量,接收el-table-column组件内部作用域插槽分发的数据 -->
        <template v-slot="props">
          <i style="font-size: 24px" :class="props.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="菜单地址" min-width="180">
      </el-table-column>
      <el-table-column prop="status" label="菜单状态" min-width="180">
        <template slot-scope="props">
          <el-button
            type="success"
            round
            size="mini"
            plain
            v-if="props.row.status === 1"
            >正常</el-button
          >
          <el-button type="danger" round size="mini" plain v-else
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column min-width="180" label="操作">
        <template v-slot="props">
          <el-button round plain type="success" size="mini" @click="edit(props.row)">编辑</el-button>
          <el-button round plain type="danger" size="mini" @click="del(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 调用子组件 -->
    <Dialog ref="dialog" :info="info"/>
  </div>
</template>

<script>
// 导入对话框组件
import Dialog from "./Dialog";
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
export default {
  components: { Dialog },
  data(){
    return {
      info:{
        // 控制对话框组件显示状态, true表示显示, false表示隐藏
        isShow:false
      }
    }
  },
  created() {
    //  请求菜单列表
    this.getMenuListAction();
  },
  computed: {
    ...mapState("menu", ["menuList"]),
  },
  methods: {
    ...mapActions("menu", ["getMenuListAction"]),
    // 删除菜单
    del(id){
      this.$myConfirm(()=>{
        // 发送数据请求
        this.$axios.post('/menudelete',{id}).then(res=>{
          if(res.code===200){
            // 更新菜单列表
            this.getMenuListAction();
          }
        });
      });
    },
    // 编辑按钮点击事件处理函数
    edit(row){
      // 1-显示对话框组件
      this.info.isShow=true;
      // 2-将待编辑的菜单数据传递给对话框组件
      this.$refs.dialog.setFormData(row);
    }
  },
};
</script>

<style scoped>
</style>